<template>
  <div>
    <!-- 二手车回访录入-->
    <TopFilter ref="topFilter" :list="topFilterList" :cols="3" :rows="2" :labelWidth="'140'" :collapse="true" @filterChange="changeHandle"></TopFilter>
    <!-- :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'" -->
    <FilterTable
      ref="table"
      :columns="columns"
      :isMemoryPagination="true"
      selectionType="single"
      columnsRef="lxjczcl"
      :isExportExcel="true"
      exportFileName="二手车回访导出表.xlsx"
      :dataSource="tableDataList"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="onRowSelectChange"
      :isServerColumnsRef="true"
    >
      <template slot="controls">
        <el-button size="small" type="primary" @click="inputClick">问卷录入</el-button>
        <el-button size="small" type="primary" @click="openRepairHistory">维修历史</el-button>
        <el-button size="small" type="primary" @click="returnHistory">回访历史</el-button>
      </template>
    </FilterTable>
    <!--车主信息-->
    <BaseDialog :visible.sync="visible_owner" :title="this.title_owner" width="70%" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <addOwnerPanel :type.sync="this.type" :resData="this.vinData" @close="closeHandler_owner" />
    </BaseDialog>

    <!--问卷录入-->
    <Drawer :visible.sync="questionnaire" title="回访信息录入" destroyOnClose :width="1300" :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <RemindInputs :remindData="questionnaireData" :buttonType="buttonType" :visitType="15721003" @close="closeQuestionNaire"></RemindInputs>
    </Drawer>

    <!-- 维修历史-->
    <Drawer :visible.sync="visible_history" :title="this.title_history" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <repairHistory ref="repairHistory" :getdata="repairHistoryData" @close="close_history"></repairHistory>
    </Drawer>

    <!-- 回访历史 -->
    <Drawer :visible.sync="returnHis" title="回访信息" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <salesVisitHistory :resData="returnHisData" @close="closeReturnHis"></salesVisitHistory>
    </Drawer>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { dictionary } from '@/utils/dictMixin';
import dictCode from '@/utils/dictCode';
import salesVisitHistory from '@/pages/customerRepair/usedCarVisit/taskEntry/salesVisitHistory.vue'; // 回访历史
import RemindInputs from '@/pages/customerRepair/customerCare/maintenanceRemind/remindInputs.vue'; // 问卷录入
import repairHistory from '@/pages/repair/business/customer/Repairhistory/historypop.vue'; // 维修历史
import addOwnerPanel from '@/pages/customerRepair/customerCare/maintenanceRemind/showCustomerInfo.vue'; // 客户档案
import { getVisitInfo } from '@/api/customerRepair/usedCarVisit/resultEntry';
import { searchRoleByCode } from '@/api/common/empSelect/index';
import { jsonToHump } from '@/utils/index';
import { arrayObjDeWeight } from '@/utils/index';
import { searchBrand, searchSeries, searchModel, searchApAckAge } from '@/api/customerRepair/customerComplaint/customerComplaintReception';

export default {
  name: 'ershouchehuifangzhuyemian',
  components: {
    addOwnerPanel,
    repairHistory,
    salesVisitHistory,
    RemindInputs
  },
  mixins: [dictionary],
  data() {
    this.BaseTable = null;
    this.type = '';
    this.buttonType = '';
    this.resData = {};
    this.selectData = {};
    this.vinData = {};
    return {
      title: '回访信息录入',
      exportLoading: false, // 导出加载中
      HFDH: '',
      title_owner: '',
      title_vehicle: '',
      title_history: '',
      topFilterList: this.createTopFilterList(),
      visible: false,
      selectFlag: false,
      visible_owner: false,
      visible_vehicle: false,
      visible_history: false,
      questionnaire: false, // 问卷录入
      returnHis: false, // 回访历史
      ownerSelect: true,
      fetchApi: getVisitInfo,
      fetchParams: { xhrAbort: true },
      columns: this.createTableColumns(),
      repairHistoryData: {}, // 维修历史数据
      questionnaireData: {}, // 问卷录入数据
      returnHisData: {}, // 回访历史数据
      tableDataList: [] // table列表数据
    };
  },
  created() {
    this.addQuestionnaireType();
  },
  methods: {
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '客户名称',
          fieldName: 'khmc',
          placeholder: '请输入客户名称'
        },
        {
          type: 'INPUT',
          label: '客户电话',
          fieldName: 'khyddh',
          placeholder: '请输入客户移动电话'
        },
        {
          type: 'SELECT',
          label: '回访状态',
          fieldName: 'hfzt',
          itemList: this.createDictList('1592'),
          initialValue: 15921001
        },
        {
          type: 'INPUT',
          label: '车型名称',
          fieldName: 'cxingmc',
          placeholder: '请输入车型名称'
        },
        {
          type: 'SELECT',
          label: '方便联系时间',
          style: { minWidth: '220px' },
          fieldName: 'fblxsj',
          valueFormat: 'yyyy-MM-dd',
          itemList: this.createDictList(8029)
        },
        {
          type: 'INPUT',
          label: '方便联系方式',
          fieldName: 'fblxfs',
          placeholder: '请输入方便联系方式'
        },
        {
          type: 'RANGE_DATE',
          label: '评估日期',
          style: { minWidth: '220px' },
          fieldName: 'pgrqBeginDate|pgrqEndDate',
          valueFormat: 'yyyy-MM-dd'
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '回访单号',
          dataIndex: 'hfdh',
          width: 150,
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input',
          editable: false
        },
        {
          title: '销售顾问',
          dataIndex: 'xsgw',
          width: 150,
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input',
          editType: 'select',
          editable: false,
          editItems: []
        },
        {
          title: '客户名称',
          dataIndex: 'khmc',
          width: 150,
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: '客户电话',
          dataIndex: 'khyddh',
          width: 150,
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: '联系人',
          dataIndex: 'lxrmc',
          width: 150,
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: '联系人手机',
          dataIndex: 'lxryddh',
          width: 150,
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: '车型',
          dataIndex: 'cxingmc',
          width: 150,
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: '底盘号',
          dataIndex: 'dph',
          width: 150,
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: '客户地址',
          dataIndex: 'khdz',
          width: 150,
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: '提车日期',
          dataIndex: 'tcrq',
          width: 150,
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'date-range',
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '成交日期',
          dataIndex: 'cjrq',
          width: 150,
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'date-range',
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '方便联系时间',
          dataIndex: 'fblxsj',
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'radio',
          filterItems: this.createDictList(8029),
          dictItems: this.createDictList(8029),
          render: props => {
            return <span>{this.createDictText(props.row.fblxsj, 8029)}</span>;
          }
        },
        {
          title: '方便联系方式',
          dataIndex: 'fblxfs',
          width: 150,
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: '车牌号',
          dataIndex: 'pzh',
          width: 150,
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        }
      ];
    },
    exhale(val, a) {
      let phone = a + val.lxryddh;
      let userData = {
        userData: {
          HFDH: val.hfdh,
          OWNER_CODE: val.ownerCode,
          OWNER_NAME: val.khmc,
          date: moment(new Date()).format('YYYY-MM-DD hh:MM:SS')
        }
      };
      window.console.log(phone);
      if (CallCenter.isLogin()) {
        CallCenter.callout(phone, null, null, null, null, userData);
        this.HFDH = val.hfdh;
      } else {
        this.$notify.warning({ title: '提示信息', message: '没有外呼权限!' });
      }
    },
    openOwner() {
      if (!this.selectFlag) {
        this.$message({
          type: 'warning',
          message: '请选择表单数据!'
        });
      } else {
        this.type = 'edit';
        this.title_owner = '车主信息';
        this.visible_owner = true;
        this.vinData = {
          OWNER_CODE: this.selectData.OWNER_CODE,
          VIN: this.selectData.dph
        };
        window.console.log(this.vinData);
      }
    },
    // 修改车辆
    openVehicle() {
      if (!this.selectFlag) {
        this.$message({
          type: 'warning',
          message: '请选择表单数据!'
        });
      } else {
        this.type = 'edit';
        this.title_vehicle = '修改车辆信息';
        this.visible_vehicle = true;
        this.resData = {
          VIN: this.selectData.VIN,
          OWNER_CODE: this.selectData.OWNER_CODE
        };
      }
    },
    // 维修历史
    openRepairHistory() {
      if (!this.selectFlag) {
        this.$message({
          type: 'warning',
          message: '请选择表单数据!'
        });
      } else {
        this.visible_history = true;
        this.title_history = '维修历史';
        this.repairHistoryData = {
          LICENSE: this.selectData.pzh,
          VIN: this.selectData.dph,
          ENGINE_NO: this.selectData.engineNo,
          OWNER_NAME: this.selectData.khmc
        };
      }
    },
    // 问卷录入
    inputClick() {
      if (!this.selectFlag) {
        this.$message({
          type: 'warning',
          message: '请选择表单数据!'
        });
      } else {
        // if(this.selectData.hfzt===15921003||this.selectData.hfzt===15921004){
        //   this.$message({
        //     type: 'warning',
        //     message: '该回访单已回访!'
        //   });
        //   return false;
        // }
        this.buttonType = 1;
        this.questionnaireData = Object.assign(this.questionnaireData, _.cloneDeep(this.selectData));
        // jsonToHump(this.questionnaireData);
        this.questionnaire = true;
      }
    },
    // 回访历史
    returnHistory() {
      if (!this.selectFlag) {
        this.$message({
          type: 'warning',
          message: '请选择表单数据!'
        });
      } else {
        this.returnHis = true;
        this.returnHisData = this.selectData;
      }
    },
    // 选中事件
    onRowSelectChange(val) {
      if (val.length == 0) {
        this.selectFlag = false;
        this.selectData = {};
      } else {
        this.selectFlag = true;
        this.selectData = val[0];
      }
    },
    // 回访历史close
    closeReturnHis(val) {
      this.returnHis = val;
    },
    // 车主信息
    closeHandler_owner(val) {
      this.visible_owner = val;
    },
    // 车辆信息
    closeHandler_vehicle(val) {
      this.visible_vehicle = val;
    },
    // 维修历史
    close_history(val) {
      this.visible_history = val;
    },
    // 问卷录入close
    closeQuestionNaire(val, params) {
      this.questionnaire = val;
      if (params === 'refresh') {
        this.fetchParams = { ...this.fetchParams };
      }
    },
    changeHandle(val) {
      this.queryMainTableData();
      // this.fetchParams = Object.assign({}, val, { visitType: '15721003' }, { xhrAbort: false });
    },
    // 查询table主数据
    async queryMainTableData() {
      console.log('查询table主数据');
      let formParams = await this.$refs.topFilter.GET_FORM_DATA();
      formParams[1].visitType = '15721003'; // 售后回访
      console.log(formParams);
      this.$refs.table.START_LOADING();
      try {
        let res = await this.fetchApi(formParams[1] || {});
        if (res.resultCode == 200) {
          this.tableDataList = res.data;
        }
      } catch (err) {
        console.log(err, '查询table主数据失败');
      } finally {
        this.$refs.table.STOP_LOADING();
      }
    },
    mounted() {
      this.BaseTable = this.$refs.table.$refs.pageTable;
    },
    // 增加问卷类型
    addQuestionnaireType() {
      this.questionnaireData = Object.assign(this.questionnaireData, { questionnaireType: '80031003' });
    }
  }
};
</script>

<style scoped lang="less"></style>
